<template>
  <div class="zhouzhuan">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">周转规则管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('rule_zhouzhuan_add')!==-1">新增周转规则</el-button>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-form-item label="规则名称" prop="mc">
          <el-input type="text"
                    class="input"
                    v-model="autoVue_table_gzmc"
                    placeholder="规则名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                    auto-correct="off"></el-input>
        </el-form-item>
      </s-table>
    </el-card>

    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}周转规则</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="gzmc" label="规则名称">
              <el-input
                type="text"
                v-model="formDialog.gzmc"
                placeholder="规则名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="gzzd" label="规则字段">
              <el-input
                type="text"
                v-model="formDialog.gzzd"
                placeholder="规则字段"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="gzms" label="规则描述">
              <el-input
                type="text"
                v-model="formDialog.gzms"
                placeholder="规则描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue} from '~/plugins/Tools';

  function __form () {
    return {
      gzmc: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      gzzd: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      gzms: { value: '', cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'rule_zhouzhuan-FEcarWms',
    head: {
      'title': '周转规则管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 周转规则 查看周转规则信息' },
      ],
    },
    store: ['USER'],
    data: {
      table: {
        column: [
          { label: '规则名称',
            prop: 'gzmc',
            minWidth: '0px',
            search: true,
          },
          { label: '规则字段',
            prop: 'gzzd',
            minWidth: '0px',
            search: true,
          },
          { label: '规则描述',
            prop: 'gzms',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '/wmsTurnOverRule/list',
        key: 'id',
        tableColumn: 3,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              let {data} = await this.post('/wmsTurnOverRule/add', option);
              this.table.data = [data, ...this.table.data];
              this.table.total++;
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
    },
    mounted: function () {
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
</style>
